<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Placehoder</title>
  <link rel="stylesheet" charset="utf-8" href="../../base.css" />
  <style type="text/css">
		body{padding:30px;}
        p{margin-bottom:15px;}
  </style>
</head>

<body>

<div id="wrapper">

  <p>Name: <br/><input type="text" placeholder="username" size="30"></p>
  <p>Site: <br /><input type="text" placeholder="http://aliceui.com" size="30"/></p>
    
</div> <!-- #wrapper -->

<script>
var doc = document,
    inputs = doc.getElementsByTagName('input'),
    supportPlaceholder = 'placeholder' in doc.createElement('input'),
    placeholder = function(input){
        var text = input.getAttribute('placeholder'),
            defaultValue = input.defaultValue;

        input.value = text;
        input.onfocus = function(){
            if(input.value === defaultValue || input.value === text){
                this.value = '';
            }
        }
        input.onblur = function(){
            if(input.value === ''){
                this.value = text;
            }
        }
    };

if(!supportPlaceholder){
    for(var i = 0, len = inputs.length; i < len; i++){
        var input = inputs[i], text = input.getAttribute('placeholder');
        if(input.type === 'text' && text){
            placeholder(input);
        }
    }    
}

</script>

</body>
</html>
